<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { Plus } from '@element-plus/icons-vue'
import { useTokenStore } from '@/stores/token.js'
import { categoryListService } from '@/api/category.js'
import { 
    articleListService, 
    articleAddService,
    articleUpdateService,
    articleBatchDeleteService,
    articleStatusUpdateService
} from '@/api/article.js'
import { ElMessage, ElMessageBox } from 'element-plus'

// 文章状态枚举
const ArticleState = {
    DRAFT: 'draft',
    PUBLISHED: 'published',
    ARCHIVED: 'archived'
}

const stateOptions = [
    { label: '草稿', value: ArticleState.DRAFT },
    { label: '已发布', value: ArticleState.PUBLISHED },
    { label: '已归档', value: ArticleState.ARCHIVED }
]

// 数据模型
const categorys = ref([])
const categoryId = ref('')
const state = ref('')
const articles = ref([])
const pageNum = ref(1)
const total = ref(20)
const pageSize = ref(3)
const visibleDrawer = ref(false)
const articleModel = ref({
    title: '',
    categoryId: '',
    coverImg: '',
    content: '',
    state: '',
    create_user: tokenStore.user?.id
})

const tokenStore = useTokenStore()

// 加载分类
const loadCategories = async () => {
    try {
        const { data } = await categoryListService()
        categorys.value = data
    } catch (error) {
        ElMessage.error(error.response?.data?.message || '获取分类列表失败')
    }
}

// 加载文章
const loadArticles = async () => {
    try {
        const params = {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            categoryId: categoryId.value || undefined,
            state: state.value || undefined
        }
        const { data } = await articleListService(params)
        
        total.value = data.total
        articles.value = data.list.map(article => {
            const category = categorys.value.find(c => c.id === article.categoryId)
            const stateLabel = stateOptions.find(s => s.value === article.state)?.label || article.state
            return {
                ...article,
                categoryName: category?.categoryName || '未知分类',
                stateLabel
            }
        })
    } catch (error) {
        ElMessage.error(error.response?.data?.message || '获取文章列表失败')
    }
}

// 分页处理
const onSizeChange = (size) => {
    pageSize.value = size
    loadArticles()
}

const onCurrentChange = (num) => {
    pageNum.value = num
    loadArticles()
}

// 上传处理
const uploadSuccess = (result) => {
    articleModel.value.coverImg = result.data
}

// 文章操作
const addArticle = async (state) => {
    try {
        await articleAddService({
            ...articleModel.value,
            state,
            create_user: tokenStore.user?.id
        })
        ElMessage.success('添加文章成功')
        visibleDrawer.value = false
        loadArticles()
    } catch (error) {
        ElMessage.error(error.response?.data?.message || '添加文章失败')
    }
}

const editArticle = (article) => {
    articleModel.value = { ...article }
    visibleDrawer.value = true
}

const updateArticle = async () => {
    try {
        await articleUpdateService(articleModel.value.id, {
            ...articleModel.value,
            create_user: tokenStore.user?.id
        })
        ElMessage.success('更新文章成功')
        visibleDrawer.value = false
        loadArticles()
    } catch (error) {
        ElMessage.error(error.response?.data?.message || '更新文章失败')
    }
}

const deleteArticle = (id) => {
    ElMessageBox.confirm('确认删除该文章吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            await articleBatchDeleteService([id])
            ElMessage.success('删除文章成功')
            loadArticles()
        } catch (error) {
            ElMessage.error(error.response?.data?.message || '删除文章失败')
        }
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

const updateArticleStatus = async (id, status) => {
    try {
        await articleStatusUpdateService(id, status)
        ElMessage.success('更新状态成功')
        loadArticles()
    } catch (error) {
        ElMessage.error(error.response?.data?.message || '更新状态失败')
    }
}

// 初始化加载
loadCategories()
loadArticles()
</script>

<template>
    <!-- 保持原有模板内容不变 -->
</template>

<style lang="scss" scoped>
/* 保持原有样式不变 */
</style>
